<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>js_11</title>
		
		<style type="text/css">
			li{
				background-color: yellow;
			}
		</style>

		<script type="text/javascript">
			/**
			 * 需求1：点击submit按钮时，检查是否选择type，若没有选择给出提示：“请选择类型”；
			 * 		检查文本矿中是否有输入(可以去除前后空格)，若没有输入，则给出提示：“请输入内容”；
			 * 若检查都通过，则在相应的ul节点中添加对应的li节点
			 * 
			 * 需求2：使包括新增的li都能响应onclick事件：弹出li的文本值.
			 */
			window.onload = function() {
				
				/**
				 * 弹出每个li的值
				 * @param {Object} liNode
				 */
				function showContent(liNode){
					alert("^_^"+liNode.firstChild.nodeValue);
				}

				var liNodes = document.getElementsByTagName("li");
				for(var i = 0; i < liNodes.length; i++) {
					liNodes[i].onclick = function() {
						showContent(this)
					}
				}

				//1.获取#Submit对应的按钮submitBtn
				var submit = document.getElementById("Submit");
				//2.为submitBtn添加onclick响应函数
				submit.onclick = function() {
					/**
					 * 4.检查是否选择type，若没有选择给出提示：“请选择类型”
					 * 4.1	选择所有的name=“type”的节点
					 * 4.2	遍历types，检查其是否有一个type的checked属性存在，
					 * 		就可说明有一个type被选中：通过if(元素节点.属性名)来判断某一个元素节点
					 * 		是否有该属性.
					 * 4.3	若没有任何一个type被选中，则弹出：“请选择类型”.响应方法结束：return false
					 */
					var types = document.getElementsByName("type");
					var typeValue = null;
					for(var i = 0; i < types.length; i++) {
						if(types[i].checked) {
							typeValue = types[i].value;
							break;
						}
					}
					if(typeValue == null) {
						alert("请选择类型");
						return false;
					}

					//5.获取name=“name” 的文本值：通过value属性：nameValue
					var nameEle = document.getElementsByName("name")[0];
					var nameValue = nameEle.value;

					/**
					 * 6.去除nameValue的前后空格.
					 * 6.1	把nameValue和“”进行比较，若是“”说明只输入了空格，弹出“请输入内容”
					 * 		方法结束：return false 
					 */
					var reg = /^\s*|\s*$/g;
					nameValue = nameValue.replace(reg, "");

					//使name得文本框也去除前后空格
					nameEle.value = nameValue;

					if(nameValue == "") {
						alert("请输入内容");
						return false;
					}

					//7.创建li节点
					var liNode = document.createElement("li");

					//8.利用nameValue创建文本节点
					var context = document.createTextNode(nameValue);

					//9.把8加为7的子节点
					liNode.appendChild(context);

					//11.为新创建的li添加onclick响应函数
					liNode.onclick = function() {
						showContent(this);
					}

					//10.把7加为选择的type对应的ul的子节点
					document.getElementById(typeValue).appendChild(liNode);

					//3.在onclick响应函数的结尾添加return false，就可以取消提交按钮的默认行为.
					return false;
				}
				return false;
			}

			//			window.onload=function(){			
			//				var bjNode=document.getElementById("bj");
			//				if(bjNode.id){
			//					alert("存在id=bj属性");
			//				}
			//				
			//				var shNode=document.getElementsByTagName("li")[1];
			//				if(shNode.id){
			//					alert("存在id=sh属性");
			//				}else{
			//					alert("不存在id=sh属性");
			//				}
			//				
			//				var nameValue="   浩  哥哥    "
			//				alert("--"+nameValue+"--");
			//				var reg=/^\s*|\s*/g;
			//				nameValue=nameValue.replace(reg,"");
			//				alert("--"+nameValue+"--");
			//			}
		</script>

	</head>

	<body>
		<p>你喜欢哪个城市？</p>
		<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		<br/><br/>
		<p>你喜欢哪款单机游戏</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		<br /><br />

		<form action="src_doc.html" name="myform">
			<input type="radio" name="type" value="city" />城市
			<input type="radio" name="type" value="game" />游戏
			<br/><br/> name:
			<input type="text" name="name" />
			<input type="submit" id="Submit" value="submit" />
		</form>

	</body>

</html>